<template>
  <view class="page-login">
    <image class="bg" src="@/static/tab/bj.jpg" mode="widthFix"></image>
    <image class="bg1" src="@/static/tab/bj1.png" mode="widthFix"></image>

    <view class="container">
      <button
        open-type="getUserInfo"
        class="logbtwx"
        @getuserinfo="handleGetUserInfo"
      >
        一键登陆
      </button>

      <!-- <button
        class="logbtwx"
        open-type="getPhoneNumber"
        @getphonenumber="getphonenumber"
      >
        一键登陆
      </button> -->
    </view>

    <view class="tan" v-if="showTan">
      <view class="tan_bj"></view>
      <view class="tan_box">
        <view class="tan_box_top">欢迎使用</view>
        <button
          class="logbtwxf"
          open-type="getPhoneNumber"
          @getphonenumber="getphonenumber"
        >
          手机号一键登录
        </button>
        <view class="tan_box_no" @click="nologin">暂不登录</view>

        <u-radio
          :customStyle="{ marginBottom: '8px' }"
          v-for="(item, index) in radiolist1"
          :key="index"
          :label="item.name"
          :name="item.name"
          @change="radioChange"
        >
        </u-radio>
      </view>
    </view>

    <!-- <view class="login-bd">
      <view class="text">
        <view>欢迎使用</view>
      </view>
      <u--form labelWidth="0" :model="form" :rules="rules" ref="uForm">
        <u-form-item prop="username">
          <view class="form-item rbox box_y_center">
            <image
              class="icon"
              src="https://ryb.ruifengcloud.com/imgs/l2.png"
              mode="widthFix"
            ></image>
            <u--input
              v-model="form.username"
              border="none"
              :clearable="true"
              placeholder="输入您的手机号"
              class="jinput"
            ></u--input>
          </view>
        </u-form-item>
        <u-form-item prop="password">
          <view class="form-item rbox box_y_center">
            <image
              class="icon"
              src="https://ryb.ruifengcloud.com/imgs/l3.png"
              mode="widthFix"
            ></image>
            <u--input
              v-model="form.password"
              border="none"
              :clearable="true"
              placeholder="输入您的密码"
              type="password"
              class="jinput"
            ></u--input>
          </view>
        </u-form-item>
        <view class="forg"></view>
        <u-form-item
          :class="
            form.username && form.password ? 'login_bt' : 'login_bt login_bt_no'
          "
        >
          <u-button
            class="logbt"
            type="primary"
            :text="loginText"
            shape="circle"
            :loading="isDisabled"
            :color="
              form.username && form.password
                ? 'linear-gradient( 90deg, rgb(75,95,255) 0%, rgb(8,82,183) 100%)'
                : 'linear-gradient(270deg,#a7a7a7, #a7a7a7)'
            "
            size="large"
            @click="submit"
          ></u-button>
        </u-form-item>
      </u--form>
    </view> -->
    <!-- <view class="reg">注 册</view> -->
  </view>
</template>

<script>
import { getInfo, socialLogin, mobileLogin } from "@/config/api.js";

export default {
  data() {
    return {
      phoneCode: "",
      code: "",
      showTan: false,
      showElement: false, // 控制元素的显示和隐藏
      isDisabled: false,
      loginText: "登录/注册",
      form: {
        // username: "xinnongren",
        // password: "123456",
        username: "",
        password: "",
      },
      rules: {
        username: {
          type: "string",
          required: true,
          message: "请输入账号",
          trigger: ["blur", "change"],
        },
        password: {
          type: "string",
          required: true,
          message: "请输入密码",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  onLoad() {
    // 判断是否登录
    // if (uni.setStorageSync("loginTokens")) {
    //   this.loginInfo();
    // }
  },
  onShow() {
    // uni.clearStorageSync("loginTokens");
  },

  mounted() {
    setTimeout(() => {
      this.showElement = false; // 3秒后隐藏元素
    }, 4000);
  },

  methods: {
    nologin() {
      this.showTan = false;
      // uni.switchTab({
      //   url: "/pages/index/index",
      // });
    },
    getphonenumber(e) {
      console.log(e);
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        this.sendphoneCodeToServer(e.detail);
      }
    },
    async sendphoneCodeToServer(e) {
      try {
        mobileLogin({
          phoneCode: e.code,
          xcxCode: this.code,
          // iv: e.iv,
          // encryptedData: e.encryptedData,
        }).then((res) => {
          console.log(res);
          if (!res) {
            // uni.$u.toast(res.msg)
          } else {
            //本地存储
            console.log(res.token);
            uni.setStorageSync("loginTokens", res.token);
            uni.setStorageSync("userId", res.userId);

            // 跳转到首页
            uni.switchTab({
              url: "/pages/index/index",
            });
          }
        });
      } catch (error) {
        console.error("请求失败:", error);
      }
    },

    async handleGetUserInfo(e) {
      if (e.detail.errMsg === "getUserInfo:ok") {
        const userInfo = e.detail.userInfo;
        console.log("用户信息:", userInfo);

        // 获取 code
        uni.login({
          provider: "weixin",
          success: (loginRes) => {
            const code = loginRes.code;
            console.log("code:", code);
            this.code = code;
            this.showTan = true;

            // 发送 code 到后端服务器，换取 openId 和 session_key
            // this.sendCodeToServer(code);
          },
          fail: (err) => {
            console.error("登录失败:", err);
          },
        });
      } else {
        console.error("用户拒绝授权");
      }
    },

    async sendCodeToServer(code) {
      try {
        mobileLogin({
          type: 34,
          code: code,
          // state: code,
        }).then((res) => {
          console.log(res);
          if (!res) {
            // uni.$u.toast(res.msg)
          } else {
            //本地存储
            console.log(res.accessToken);
            uni.setStorageSync("loginTokens", res.accessToken);
            uni.setStorageSync("userId", res.userId);

            // 跳转到首页
            uni.switchTab({
              url: "/pages/index/index",
            });
          }
        });
      } catch (error) {
        console.error("请求失败:", error);
      }
    },

    loginInfo() {
      getInfo().then((res) => {
        console.log(res);
        if (res.code != 200) {
          // uni.$u.toast(res.msg)
        } else {
          //本地存储
          uni.setStorageSync("loginTokens", res.loginTokens);

          // 跳转到首页
          uni.switchTab({
            url: "/pages/index/index",
          });
        }
      });
    },
    // 提交
    submit() {
      if (this.isDisabled) {
        return; // 若按钮已经处于禁用状态，则直接返回，无法进行后续操作
      } else {
        // uni.switchTab({
        //   url: "/pages/index/index",
        // });
        // return;

        this.$refs.uForm
          .validate()
          .then((res) => {
            this.isDisabled = true; // 将按钮状态设为禁用
            this.loginText = "登录中..";

            this.$store
              .dispatch("Login", this.form)
              .then((res) => {
                console.log(res);
                // 完成操作后，将按钮状态设为非禁用
                this.isDisabled = false;
                this.loginText = "登录/注册";
                //             if (res.code != 0) {
                //               uni.$u.toast(res.msg);

                //             } else {

                //本地存储
                uni.setStorageSync("loginTokens", res.accessToken);
                uni.setStorageSync("userId", res.userId);

                // 跳转到首页
                uni.switchTab({
                  url: "/pages/index/index",
                });

                // this.loginInfo();
                // }
              })
              .catch((error) => {
                // console.log("Loginerror",error);
                //           uni.$u.toast("网络请求失败，请稍后再试");
                this.isDisabled = false;
                this.loginText = "登录/注册";
                // console.error("访问接口请求失败");
                // 在这里处理请求失败的情况
              });
          })
          .catch((errors) => {
            // uni.$u.toast('请检查输入')
          });
      }
    },
  },
};
</script>

<style lang="scss">
.bg1 {
  width: 670rpx;
  height: auto;
  display: block;
  float: left;
  margin: 250rpx 50rpx 50rpx;
  position: relative;
  z-index: 99;
}
.tan {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.tan_bj {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.5);
}

.logbtwxf {
  width: 700rpx;
  height: 90rpx;
  font-size: 30rpx;
  line-height: 90rpx;
  padding: 0;
  margin: 0 auto 0;
  position: relative;
  z-index: 99;
}

.tan_box {
  width: 100%;
  height: 500rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
}
.tan_box_top {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  text-align: center;
  color: #000000;
  font-size: 30rpx;
  margin: 50rpx 0;
}
.tan_box_no {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  text-align: center;
  color: #a8a8a8;
  font-size: 30rpx;
  margin: 50rpx 0;
}
@keyframes jfadeOut {
  from {
    opacity: 0; /* 开始时完全透明 */
    transform: scale(0); /* 开始时缩放比例为0，即元素不可见 */
  }

  to {
    opacity: 1; /* 结束时完全不透明 */
    transform: scale(1); /* 结束时缩放比例为1，即元素恢复原大小 */
  }
}

.we {
  opacity: 1;
  transform: scale(1);
  animation: 2s jfadeOut 2s ease-in-out;
  animation-fill-mode: forwards;
  z-index: 99;
  width: 100%;
  height: 100%;
  display: block;

  background-size: 100% auto;
  position: fixed;
}

.we i {
  width: 520rpx;
  height: 620rpx;
  display: block;
  float: left;
  margin: 750rpx 115rpx 26rpx;

  background-size: 100%;
  opacity: 0;
  transform: scale(0);
  animation: jfadeIn 1.5s ease-in-out;
  animation-fill-mode: forwards;
}

.we image {
  width: 185rpx;
  height: 55rpx;
  display: block;
  position: fixed;
  left: 282rpx;
  bottom: 50rpx;
}

@keyframes jfadeIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reg {
  width: 100%;
  font-size: 28rpx;
  color: #242424;
  text-align: center;
  margin: 100rpx 0 0;
  opacity: 0.5;
}

.logbt {
  width: 479rpx;
  height: 80rpx;
  font-size: 30rpx;
  line-height: 80rpx;
  position: absolute;
  left: 80rpx;
  bottom: -40rpx;
  margin: 0;
}

.forg {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 30rpx 50rpx 40rpx;
  font-size: 24rpx;
  color: #0086ff;
  text-align: right;
}

.footer {
  position: fixed;
  bottom: 50rpx;
  width: 100%;
  line-height: 33rpx;
  color: #b8b7b7;
  font-size: 20rpx;
  text-align: center;
}

@keyframes move-up {
  0% {
    transform: translateY(50px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

::v-deep .u-loading-icon__spinner {
  color: #fff !important;
  margin: 0 5px -2px 0;
}

.bg {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
.page-login {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  background: #eff3f3;
  position: fixed;

  // animation: jfadeOut 1s ease-in-out forwards; /* 应用动画，持续2秒，缓动效果为ease-in-out，结束后保持最终状态 */
  .login-hd {
    text-align: center;
    padding-top: 50rpx;
    animation: fadeInDown 0.8s ease-out;
    // animation: move-up .5s ease-out;
  }

  .login-bd {
    box-shadow: 0px 20px 37px 13px rgba(180, 120, 37, 0.1);

    background-color: rgb(255, 255, 255);

    width: 651rpx;

    margin: -450rpx auto 0;

    z-index: 95;
    background: #ffffff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 0 26rpx 70rpx;
    box-sizing: border-box;
    position: relative;

    // animation: move-up 1s ease-out;
    .text {
      text-align: left;
      font-size: 48rpx;
      line-height: 55rpx;
      font-weight: 500;
      color: #3e4a59;
      letter-spacing: 1rpx;
      margin: 0rpx auto 0;
      box-sizing: border-box;
      padding: 46rpx 0 30rpx 50rpx;
      // animation: fadeInLeft 0.8s ease-out;
    }

    .form-item {
      // animation: fadeInLeft 1s ease-out;
      border-bottom: 1px solid #e5e5e5;
      flex: 1;
      box-sizing: border-box;
      padding: 20rpx 30rpx;

      .icon {
        width: 52rpx;
        margin-right: 20rpx;
      }
    }
  }
}

.login_bt {
  margin-top: -60rpx;
  // animation: fadeInLeft 1.2s ease-out;
}

.login_bt_no {
  opacity: 1;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  display: block;
  float: left;
}

.logbtwx {
  width: 700rpx;
  height: 90rpx;
  font-size: 30rpx;
  line-height: 90rpx;
  padding: 0;
  margin: 50rpx auto 0;
  position: relative;
  z-index: 99;
}

button {
  width: 80%;
  padding: 15px;
  font-size: 16px;

  color: white;
  background: linear-gradient(40deg, #49b9ad 0%, #49b9ad 100%), #000000;
  border-radius: 20rpx;
}
</style>
